<template>
  <div class="repair-request-page">
    <el-card>
      <div style="margin-bottom: 16px;">
        <el-form :inline="true" :model="query" size="small">
          <el-form-item label="标题">
            <el-input v-model="query.title" placeholder="报修标题" clearable />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="query.typeId" placeholder="全部类型" clearable>
              <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="query.status" placeholder="全部状态" clearable>
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model="query.applicantName" placeholder="申请人姓名" clearable />
          </el-form-item>
          <el-form-item label="维修人">
            <el-input v-model="query.assigneeName" placeholder="维修人员姓名" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchList">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="list" border stripe style="width: 100%;">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="title" label="标题" min-width="120" />
        <el-table-column prop="typeId" label="类型" min-width="100">
          <template #default="scope">
            {{ typeMap[scope.row.typeId] || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="applicantName" label="申请人" min-width="100" />
        <el-table-column prop="contact" label="联系方式" min-width="100" />
        <el-table-column prop="location" label="报修地点" min-width="120" />
        <el-table-column prop="status" label="状态" min-width="100">
          <template #default="scope">
            <el-tag :type="statusTagType(scope.row.status)">{{ statusLabel(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="assigneeName" label="维修人员" min-width="100" />
        <el-table-column prop="applyTime" label="申请时间" min-width="150" />
        <el-table-column label="操作" min-width="220">
          <template #default="scope">
            <el-button v-if="scope.row.status === 0" size="small" type="success" @click="onAudit(scope.row, true)">通过</el-button>
            <el-button v-if="scope.row.status === 0" size="small" type="danger" @click="onAudit(scope.row, false)">驳回</el-button>
            <el-button v-if="scope.row.status === 1" size="small" type="primary" @click="onAssign(scope.row)">派单</el-button>
            <el-button v-if="scope.row.status === 2" size="small" type="warning" @click="onFinish(scope.row)">完工</el-button>
            <el-button size="small" @click="onView(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 16px; text-align: right;">
        <el-pagination
          v-model:current-page="query.pageNum"
          v-model:page-size="query.pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="fetchList"
          @current-change="fetchList"
        />
      </div>
    </el-card>
    <!-- 派单弹窗 -->
    <el-dialog v-model="assignDialog.visible" title="派单" width="400px">
      <el-form :model="assignDialog.form" label-width="80px">
        <el-form-item label="维修人员">
          <el-input v-model="assignDialog.form.assigneeName" placeholder="请输入维修人员姓名" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="assignDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="doAssign">确定</el-button>
      </template>
    </el-dialog>
    <!-- 驳回弹窗 -->
    <el-dialog v-model="rejectDialog.visible" title="驳回理由" width="400px">
      <el-input v-model="rejectDialog.remark" type="textarea" rows="4" placeholder="请输入驳回理由" />
      <template #footer>
        <el-button @click="rejectDialog.visible = false">取消</el-button>
        <el-button type="danger" @click="doReject">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
import { useRouter } from 'vue-router'

const query = reactive({
  title: '',
  typeId: null,
  status: null,
  applicantName: '',
  assigneeName: '',
  pageNum: 1,
  pageSize: 10
})
const list = ref([])
const total = ref(0)
const typeList = ref([])
const typeMap = reactive({})
const statusOptions = [
  { value: 0, label: '待审核' },
  { value: 1, label: '待派单' },
  { value: 2, label: '维修中' },
  { value: 3, label: '已完成' },
  { value: 4, label: '已驳回' }
]

const statusLabel = (status) => {
  const found = statusOptions.find(item => item.value === status)
  return found ? found.label : '-'
}
const statusTagType = (status) => {
  switch (status) {
    case 0: return 'info'
    case 1: return 'primary'
    case 2: return 'warning'
    case 3: return 'success'
    case 4: return 'danger'
    default: return ''
  }
}

const fetchTypeList = async () => {
  const res = await request.get('/repair/type/list')
  if (res.code === 1) {
    typeList.value = res.data
    res.data.forEach(item => { typeMap[item.id] = item.name })
  }
}

const fetchList = async () => {
  const res = await request.post('/repair/request/page', query)
  if (res.code === 1) {
    list.value = res.data.records
    total.value = res.data.total
  }
}

const resetQuery = () => {
  query.title = ''
  query.typeId = null
  query.status = null
  query.applicantName = ''
  query.assigneeName = ''
  query.pageNum = 1
  fetchList()
}

// 审核通过/驳回
const onAudit = (row, pass) => {
  if (pass) {
    ElMessageBox.confirm('确认通过该报修单？', '提示', { type: 'warning' }).then(async () => {
      await request.post('/repair/request/audit', null, { params: { id: row.id, pass: true } })
      ElMessage.success('审核通过')
      fetchList()
    })
  } else {
    rejectDialog.row = row
    rejectDialog.visible = true
    rejectDialog.remark = ''
  }
}
const rejectDialog = reactive({ visible: false, row: null, remark: '' })
const doReject = async () => {
  await request.post('/repair/request/audit', null, { params: { id: rejectDialog.row.id, pass: false, remark: rejectDialog.remark } })
  ElMessage.success('已驳回')
  rejectDialog.visible = false
  fetchList()
}

// 派单
const assignDialog = reactive({ visible: false, row: null, form: { assigneeName: '' } })
const onAssign = (row) => {
  assignDialog.row = row
  assignDialog.form.assigneeName = ''
  assignDialog.visible = true
}
const doAssign = async () => {
  if (!assignDialog.form.assigneeName) {
    ElMessage.warning('请输入维修人员姓名')
    return
  }
  await request.post('/repair/request/assign', null, { params: { id: assignDialog.row.id, assigneeId: 0, assigneeName: assignDialog.form.assigneeName } })
  ElMessage.success('派单成功')
  assignDialog.visible = false
  fetchList()
}

// 完工
const onFinish = (row) => {
  ElMessageBox.confirm('确认将该报修单标记为已完成？', '提示', { type: 'warning' }).then(async () => {
    await request.post('/repair/request/finish', null, { params: { id: row.id } })
    ElMessage.success('已完工')
    fetchList()
  })
}

const onView = (row) => {
  router.push({ path: '/repairDetail', query: { id: row.id } })
}

onMounted(() => {
  fetchTypeList()
  fetchList()
})
</script>

<style scoped>
.repair-request-page {
  padding: 24px;
}
</style> 